<template>
	<view class="search_bar">
		<view class="searh_box">
			<uni-icons type="search" size="18" color="#A9A9A9" class="search_icon" v-show="searchIconShow"></uni-icons>
			<input type="text" :style="{textAlign:align}" v-model="value" @focus="focus" @blur="blur" :focus="isFocus" :placeholder="placeholder" class="search_i" @confirm='search' />
			<uni-icons type="closeempty" size="18" color="#A9A9A9" v-show="clearShow" class="clear_icon" @click="clearSearch"></uni-icons>
		</view>
		<text class="search_t" @click="search">搜索</text>
	</view>
</template>

<script>
	export default{
		props:{
			placeholder:{
				default:'搜索你想要的产品',
				type:String
			},
			align:{
				default:'left',
				type:String
			},
			searchIconShow:{
				default:false,
				type:Boolean
			},
			isFocus:{
				default:false,
				type:Boolean
			},
			searchValue:{
				default:'',
				type:String
			}
		},
		data(){
			return{
				clearShow:false,
				value:''
			}
		},
		watch:{
			searchValue(news,old){
				this.value = news;
			},
			value(news,old){
				if(this.value !== '' && news !==''){
					this.clearShow = true;
				}else{
					this.clearShow = false
				}
			},
		},
		methods:{
			focus(){
				this.$emit('focus',this.value);
			},
			search(){
				this.$emit('search',this.value)
			},
			blur(){
				this.$emit('blur',this.value)
			},
			clearSearch(){
				this.value = '';
				this.$emit('clear',this.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_bar{
		line-height: 64rpx;
		font-size: 28rpx;
		display: flex;
		.searh_box{
			width: 550rpx;
			line-height: 64rpx;
			position: relative;
			border-radius: 16px;
			padding: 0 20rpx;
			background: #F5F6F7;
			display: flex;
			margin-right:30rpx;
			position: relative;
			padding-right: 30rpx;
			.clear_icon{
				position: absolute;
				right: 20rpx;
				top: 0;
			}
		}
		.search_i{
			height: 64rpx;
			font-size: 28rpx;
			text-align: center;
			width: 80%;
		}
		.search_t{
			color: #ADADAD;
		}
		/deep/ .uni-input-placeholder{
			color: #ADADAD;
		}
	}
</style>
